<template>
	<view class="calendar-main">
		<!-- 当前年月 -->
		<view class="choose_year">
			<view class="icon" @click="chooseYears(-1)">{{getArrow('left-double')}}</view>
			<view class="icon" @click="chooseMonth(-1)">{{getArrow('left')}}</view>
			<view class="date">{{ year }}年{{ month.toString().padStart(2, '0') }}月</view>
			<view class="icon" @click="chooseMonth(1)">{{getArrow('right')}}</view>
			<view class="icon" @click="chooseYears(1)">{{getArrow('right-double')}}</view>
		</view>
		<!-- 农历 -->
		<view class="lunar-detail-date">
			{{ lunarDetail.lunarYear.substring(0, 2) }}
			-【{{ lunarDetail.lunarYear.substring(2, 3) }}】年{{ lunarDetail.lunarMonth }}月{{ lunarDetail.lunarDay }}
		</view>

		<!-- 日历 -->
		<view class="days_area">
			<view class="day week" v-for="week in weeks" :key="week">{{ week }}</view>
			<view class="day" @click="chooseThisDay(day.gregorian)" v-for="(day, index) in days" :key="index"
				:class="day.gregorian === today ? 'choose_day' : ''">
				<text>{{ day.gregorian }}</text>
				<text>{{ day.lunar }}</text>
				<text>{{ day.dayGanzhi }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sloarToLunar,
		getYearMonthDay,
		getDayGanzhi
	} from './computedLunarDate.js';

	class Day {
		// 公历
		gregorian = '';

		// 农历
		lunar = '';

		dayGanzhi = '';

		constructor(gregorian, lunar, dayGanzhi) {
			this.gregorian = gregorian;
			this.lunar = lunar;
			this.dayGanzhi = dayGanzhi;
		}
	}

	export default {
		name: 'LunarCalendar',
		props: ['currentDate'],
		data() {
			return {
				year: 0,
				month: 0,
				today: 0,
				days: [],
				weeks: ['一', '二', '三', '四', '五', '六', '日'],
				todayDate: 0
			};
		},
		mounted() {
			this.todayDate = new Date().getDate();
			if (this.currentDate) {
				const now = new Date(this.currentDate);
				this.year = now.getFullYear();
				this.month = now.getMonth() + 1;
				this.today = now.getDate();
			} else {
				const now = new Date();
				this.year = now.getFullYear();
				this.month = now.getMonth() + 1;
				this.today = now.getDate();
			}
			this.getDays();
		},
		computed: {
			selectDate() {
				return `${this.year}-${this.month.toString().padStart(2, '0')}-${this.today}`;
			},
			lunarDetail() {
				return sloarToLunar(this.year, this.month.toString().padStart(2, '0'), this.today);
			}
		},
		onShareAppMessage() {
			
		},
		onShareTimeline() {
			
		},
		methods: {
			getArrow(type) {
				let res = ''
				switch (type) {
					case 'left-double':
						res = '<<'
						break;
					case 'left':
						res = '<'
						break;
					case 'right-double':
						res = '>>'
						break;
					case 'right':
						res = '>'
						break;
					default:
						break;
				}
				return res
			},
			// 获取当前月份所有公历日期及其农历日期
			getDays() {
				this.days = [];
				const time = new Date();
				time.setFullYear(this.year, this.month, 0);

				const firstDay = new Date(this.year, this.month - 1, 1); // 当月第一天
				const lastDay = new Date(this.year, this.month, 0); // 当月最后天

				// 获取星期中的第几天（0-6）(星期日-星期六)
				const weekIndex = firstDay.getDay() == 0 ? 7 : firstDay.getDay();
				for (let i = 1; i < weekIndex; i++) {
					this.days.push(new Day('', '', ''));
				}
				for (let i = 1; i <= time.getDate(); i++) {
					this.days.push(new Day(i, getYearMonthDay(this.year, this.month, i), getDayGanzhi(this.year, this
						.month, i)));
				}
			},
			// 改变年份
			chooseYears(state) {
				this.year += state;
				if (new Date().getFullYear() === this.year && new Date().getMonth() + 1 === this.month) {
					this.today = this.todayDate;
				} else {
					this.today = 0;
				}
				this.getDays();
			},
			// 改变月份
			chooseMonth(state) {
				this.month += state;
				if (new Date().getFullYear() === this.year && new Date().getMonth() + 1 === this.month) {
					this.today = this.todayDate;
				} else {
					this.today = 0;
				}
				if (this.month < 1) {
					this.month = 12;
					this.chooseYears(-1);
				} else if (this.month > 12) {
					this.month = 1;
					this.chooseYears(1);
				} else {
					this.getDays();
				}
			},
			chooseThisDay(day) {
				console.log(this.lunarDetail);
				if (day > 0) {
					this.today = day;
				}
			},
			getBit(m, n) {
				return 29 + ((m >> n) & 1);
			}
		}
	};
</script>

<style lang="less" scoped>
	.calendar-main {
		width: 100vw;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2);
		border-radius: 5px;

		.choose_year {
			display: flex;

			.icon {
				padding: 0 8rpx;
			}

			.date {
				flex: 1;
				text-align: center;
			}
		}

		.lunar-detail-date {
			line-height: 15px;
			text-align: center;
			color: #ff6800;
		}

		.days_area {
			display: flex;
			flex-wrap: wrap;

			.day {
				width: 14.28%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				font-size: 20rpx;
				padding: 8rpx 0;

				&:hover {
					background-color: #87bdf3;
					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}
			}

			.week {
				background-color: #fff;
				color: #19233c;
				font-weight: bold;
				height: 40px;
				line-height: 40px;
				margin: 0;
			}

			.choose_day {
				background-color: dodgerblue;
				color: #fff;
				font-weight: bold;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;

				text {
					color: #fff;
				}
			}
		}

		.bottom-btn {
			text-align: right;

			span {
				padding: 4px 8px;
				margin-right: 5px;
				cursor: pointer;
				border: 1px solid #999;
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;

				&:hover {
					color: dodgerblue;
					border: 1px solid dodgerblue;
				}
			}
		}
	}
</style>